<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // https://www.processon.com/diagraming/614568cf7d9c08198c56c649

        /*  线程: Thread: 执行运算最小单位, 一个理发师
        进程: Process: 一个应用程序(QQ,酷狗,浏览器),一个进程,一个理发店
        
        JavaScript 语言的一大特点就是单线程，也就是说，同一时间只能做一件事情，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。

        这样所导致的问题是：如果JS执行的时间过长， 这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉，


        同步和异步：
        为了解决这个问题，利用多核 CPU 的计算能力。
        HTML5提出WebWorker 标准， 允许 JavaScript 脚本创建多个线程。
        于是，JS 中出现了同步和异步.

        同步和异步： 
            同步交互：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有个等待过程，
            异步交互：指发送一个请求，不需要等待返回，随时可以在发送下一个请求，既不需要等待。
            
            同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情，  当服务端做完了才返回到客户端，这样的话客户端需要一直等待，用户使用起来会有不友好，
            异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率，

        同步异步案例：
            一家餐厅吧来了5个客人，同步的意思就是说，来第一个点菜，点了个鱼，好， 厨师去捉鱼杀鱼，过了半小时鱼好了给第一位客人，开始下位一位客人，就这样一个一个来，按顺序来相同，
            异步呢，异步的意思就是来第一位客人，点什么，点鱼，给它一个牌子，让他去一边等吧，下一位客人接着点菜，点完接着点让厨师做去吧，哪个的菜先好就先端出来，

        同步任务：同步任务都在主线程上执行，形成一个执行栈
        异步任务：JS的异步是通过毁掉函数实现的
                  一般而言，异步任务有一下三种类型：
                  1.普通事件， click  resize 等
                  2.资源加载，load  error 等
                  3. 定时器，setInterval   setTimeout 等
        异步任务相关回调函数添加到任务队列中（任务队列也成为消息队列）

        js执行机制：
                  1.先执行执行栈中的同步任务；
                  2.异步任务（回调函数）放入任务队列中
                  3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束，结束等待状态，进入执行栈（即放到执行栈的最后），开始执行，
                  4.类似异步任务放入高速的服务区。

        同步任务执行完毕后，将再次获取任务队列，放入同步任务，继续执行，
        由于主线程不断的重复获得任务，执行任务，在获取任务，再执行，所以这种机制被称为时间循环（event loop）
        
        */
    </script>

</body>

</html>